<template>
    <div class="QilinDrawer">
        <el-drawer
            v-model="ownDrawerConfig.isShow"
            :title="ownDrawerConfig.title || '提示' "
            :close-on-click-modal="ownDrawerConfig.closeOnClickModal || false "
            :close-on-press-escape="ownDrawerConfig.closeOnPressEscape || false "
            :modal="ownDrawerConfig.modal ?? true "
            :append-to-body="ownDrawerConfig.appendToBody ?? true "
            :direction="ownDrawerConfig.direction || 'rtl' "
            :lock-scroll="ownDrawerConfig.lockScroll ?? true"
            :open-delay="ownDrawerConfig.openDelay || 0"
            :close-delay="ownDrawerConfig.closeDelay || 0"
            :before-close="handleClose"
        >
            <slot></slot>
            <template v-slot:footer v-if="!ownDrawerConfig.isHideFooter">
                <template v-if="ownDrawerConfig.additionalButton && ownDrawerConfig.additionalButton.length > 0">
                    <el-button
                        v-for="(item,index) in ownDrawerConfig.additionalButton"
                        :key="index"
                        :type="item.btnType || 'default' "
                        :size="item.btnSize || 'default' "
                        @click="(item.btnClick && item.btnClick()) || (item.click && item.click())"
                    >{{item.btnName || item.btnText || "额外按钮" }}</el-button>
                </template>
                <el-button
                    v-if="ownDrawerConfig.confirmBtnConfig?.isShow ?? true"
                    :type="ownDrawerConfig.confirmBtnConfig?.btnType || ownDrawerConfig.closeBtnType || 'default' "
                    :size="ownDrawerConfig.confirmBtnConfig?.btnSize || ownDrawerConfig.closeBtnSize || 'default' "
                    @click="handleClose"
                >
                    {{ownDrawerConfig.confirmBtnConfig?.btnName || ownDrawerConfig.closeBtnText || "取消" }}
                </el-button>
                <el-button
                    v-if="ownDrawerConfig.cancelBtnConfig?.isShow ?? true"
                    :type="ownDrawerConfig.cancelBtnConfig?.btnType || ownDrawerConfig.confirmBtnType || 'default' "
                    :size="ownDrawerConfig.cancelBtnConfig?.btnSize || ownDrawerConfig.confirmBtnSize || 'default' "
                    @click="emits('submitConfirm')"
                >
                    {{ownDrawerConfig.cancelBtnConfig?.btnName || ownDrawerConfig.confirmBtnText || "确定" }}
                </el-button>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import {defineOptions,computed} from "vue";

defineOptions({
    name:"QilinDrawer"
});

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 接收来自父组件的值
const propsValue=defineProps({
    drawerConfig:{
        type:Object,
        default(){
            return {
                isShow:false, //是否显示抽屉
                title:"提示", // 标题
                appendToBody:true, //抽屉自身是否插入到body元素上
                lockScroll:true, //是否在抽屉出现时将body滚动锁定
                closeOnClickModal:false, //是否可以通过点击阴影部分即modal关掉抽屉
                closeOnpressEscape:false, //是否可以通过按下ESC关闭抽屉
                openDelay:0, //抽屉打开的延时时间，单位毫秒
                closeDelay:0, //抽屉关闭的延时时间，单位毫秒
                modal:true, //是否需要遮罩层
                showClose:true, //是否显示关闭按钮
                direction:"rtl", //抽屉打开的方向，默认从右向左
                isHideFooter:true, //是否隐藏脚部元素
                confirmBtnConfig:{ //弹窗确认按钮的配置项
                    btnName:"确定",
                    btnType:"primary",
                    btnSize:"default",
                    isShow:true
                },
                cancelBtnConfig:{ //弹窗取消按钮的配置项
                    btnName:"取消",
                    btnType:"default",
                    btnSize:"default",
                    isShow:true
                },
                additionalButton:[ //额外按钮的配置项
                    {
                        btnName:"额外按钮", //旧版本btnText
                        btnType:"default",
                        btnSize:"default",
                        btnClick:"event", //旧版本click
                    }   
                ]
            }
        }
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:drawerConfig","handleClose","submitConfirm"]);
// 组件自身的配置项
const ownDrawerConfig=computed({
    get(){
        return propsValue.drawerConfig;
    },
    set(val){
        emits("update:drawerConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 关闭抽屉事件监听
const handleClose=()=>{
    emits("handleClose");
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss">
.el-drawer{
    >.el-drawer__header{
        padding-bottom:var(--el-drawer-padding-primary);
        margin-bottom:0;
        border-bottom:1px solid $border-color;
    }
}
</style>
